<script lang="ts">
import { h, ref, Ref, defineComponent, onMounted, render, createVNode } from 'vue'
import domList from './list.vue'

function getElmHeight (elm: HTMLDivElement) {
  const computedStyle = getComputedStyle(elm, null)
  const marginBottom = Number(
    computedStyle.marginBottom.replace('px', '') || 0
  )
  const marginTop = Number(computedStyle.marginTop.replace('px', '') || 0)
  return (elm.clientHeight || 0) + marginBottom + marginTop
}

function getScrollContentInfo (domDataList: any[], containerHeight: number) {
  let virtualizedContainerHeight = 0
  const container = document.createElement('div')
  container.style.visibility = 'hidden'
  container.style.position = 'absolute'
  container.style.zIndex = '-1'
  const vm = createVNode(domList, { list: domDataList.slice(0, 2) })
  render(vm, container)
  document.body.appendChild(container)
  const childOneHeight = getElmHeight(container.children[0] as HTMLDivElement)
  const childTwoHeight = getElmHeight(container.children[1] as HTMLDivElement)
  if (childOneHeight === childTwoHeight) {
    virtualizedContainerHeight = childOneHeight * domDataList.length
  } else {
    virtualizedContainerHeight = Math.max(childOneHeight, childTwoHeight) * domDataList.length - Math.abs(childOneHeight - childTwoHeight)
  }
  container.remove()
  return {
    virtualizedContainerHeight,
    pageSize: containerHeight / Math.max(childOneHeight, childTwoHeight)
  }
}

export default defineComponent({
  setup () {
    const scrollBarHeight: Ref<number> = ref(0)
    const virtualizedScroll = ref<HTMLDivElement|null>(null)
    const virtualizedScrollContent = ref<HTMLDivElement|null>(null)
    const domDataList: number[] = []
    const list: Ref<number[]> = ref([])
    for (let i = 0; i < 109; i++) {
      domDataList[i] = i + 1
    }
    onMounted(() => {
      const info = getScrollContentInfo(domDataList, 500)
      const virtualizedScrollDom = virtualizedScroll.value as HTMLDivElement
      virtualizedScrollDom.addEventListener('scroll', () => {
        console.info(virtualizedScrollDom.scrollTop)
        // upContentDom.style.height = virtualizedScrollDom.scrollTop + 'px'
      })
      ;(virtualizedScrollContent.value as HTMLDivElement).style.padding = '0 0 100px 0'
      // list.value = domDataList
      list.value = [...domDataList.slice(0, 10)]
    })
    return {
      list,
      virtualizedScroll,
      virtualizedScrollContent,
      scrollBarHeight
    }
  },
  render () {
    return createVNode('div', {
      ref: 'div'
    }, [
      createVNode(
        'div',
        { class: 'virtualized-scroll', ref: 'virtualizedScroll' },
        [
          createVNode(
            'div', { ref: 'virtualizedScrollContent' },
            [
              createVNode(domList, { list: this.list })
            ]
          )
        ]
      )
    ])
  }
})
</script>

<style scoped lang="less">
.virtualized-scroll {
  height: 500px;
  width: 500px;
  border: 1px solid ;
  overflow: auto;
  position: relative;
  padding-right: 20px;
  box-sizing: border-box;
  .virtualized-scroll-content {
    overflow: auto;
    position: absolute;
    width: 20px;
    /*left: 0;*/
    top: 0;
    right: 0;
    bottom: 0;
  }
}
</style>
